var abimage = Vue.extend({
    template: `<div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                    <span>广告设置</span>
                    <el-button style="float: right;" type="primary" 
                    @click="addAbImage">添加</el-button>
                    </div>
                    <div class="text item">
                    <el-table
                      :data="iamge_data"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="id"
                        label="ID"
                        >
                      </el-table-column>
                      <el-table-column
                        label="图片"
                        >
                        <template slot-scope="scope">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.image_path"
                        fit="contain"></el-image>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="order"
                        label="排序"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="created_at"
                        label="创建时间"
                        >
                      </el-table-column>
                      <el-table-column
                        label="操作"
                        >
                        <template slot-scope="scope">
                            <el-button @click="deleteImage(scope.row)" type="danger">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>                     
                    <el-pagination
                      background
                      :page-size="iamge_page_size"
                      layout="prev, pager, next"
                      :total="iamge_total"
                      :current-page.sync="iamge_current_page"
                      prev-text="上一页"
                      next-text="下一页"
                      @current-change="handleiamgeCurrentChange">
                    </el-pagination>
                    </div>
                </el-card>
                <el-dialog
						title="添加广告"
						:visible.sync="dialogImageVisible"
						width="30%"
						:before-close="handleClose">
                        <el-form ref="formData" :model="formData" label-width="80px">
                            <el-form-item label="上传图片">
                            <el-upload
                                class="avatar-uploader"
                                :multiple="multiple"
                                :action="action"
                                :data="token"
                                name="abImage"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="广告链接" prop="out_url">
                                <el-input v-model="formData.out_url"></el-input>
                            </el-form-item>
                            <el-form-item label="到期时间" prop="available_time">
                                <el-date-picker
                                v-model="formData.available_time"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                            </el-date-picker>
                            </el-form-item>
                            <el-form-item label="排序" prop="order">
                                <el-input v-model="formData.order"></el-input>
                            </el-form-item>
                        </el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="handleClose">取 消</el-button>
							<el-button type="primary" @click="editImage">确 定</el-button>
                        </span>
					</el-dialog>
                </div>
    `,
    props: {
        id: {
            type: String,
            require: true,
        },
        url: {
            type: String,
            require: true,
        },
        action: {
            type:String,
            require: true,
        },
        token:{
            require: true,
        }
    },
    data: function(){
        return {
            total_income:0,
            iamge_data: [],
            iamge_page_size:0,
            iamge_current_page:1,
            iamge_total:0,
            iamge_price:[],
            change_id:'',
            dialogImageVisible:false,
            multiple: false,
            imageUrl:'',
            formData:{
                path:'',
                host:'',
                machine_id:'',
                order:0,
                available_time:'',
                out_rul:'',
            }
        }
    },
    watch:{
        change_id: function(){
            this.get_images();
        }
    },
    mounted: function(){
        this.get_images();
    },
    methods: {
        get_images(){
            var that = this;
            var params = '';
            params = {
                params:{
                    id: that.id,
                    page:that.iamge_current_page,
                }
            }
            axios.get(that.url,params).then(res => {
                var data = res.data.data;
                that.iamge_data = data.data;
                that.iamge_total = data.total;
                that.iamge_page_size = data.per_page;
            });
        },
        handleiamgeCurrentChange(page){
            this.iamge_current_page = page;
            this.get_iamges();
        },
        addAbImage(){
            this.dialogImageVisible = true;
        },
        handleClose(){
            this.dialogImageVisible = false;
            this.$refs.formData.resetFields();
        },
        handleAvatarSuccess(res, file) {
            if(res.code == 200){
                this.imageUrl = res.data.host + res.data.url
                this.formData.path = res.data.url
                this.formData.host = res.data.host
            }else if(res.code == 400){
                res.data.forEach(item => {
                    this.$message({
                        message: item,
                        type: 'warning'
                      });
                });
            }
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
            }
            return isLt2M;
        }, 
        editImage(){
            var that = this
            that.formData.machine_id = that.id;
            axios.post("addAbImage",that.formData).
            then(res => {
                this.$message.success('添加成功');
                this.dialogImageVisible = false;
                this.$refs.formData.resetFields();
                this.get_images();
            })
        },
        deleteImage(row){
            var that = this
            that.$confirm('确定删除该广告?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true 
            }).then(() => {
                axios.post('delAbImage',{'id':row.id}).
                then(res => {
                    this.$message.success('删除成功');
                    this.get_images();
                })
            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
            });
        }
    }
});
Vue.component('ab-image', abimage);